// 向下方进入
.slide-down-enter-active {
  animation: enter ease .3s;
}

.slide-down-leave-active {
  animation: leave ease .5s;
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

// 向上方进入
// 向下方进入
.slide-up-enter-active {
  animation: up-enter ease .3s;
}

.slide-up-leave-active {
  animation: up-leave ease .5s;
}

@keyframes up-enter {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes up-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

// dialog向下方进入
.slide-down-dialog-enter-active {
  animation: dialog-enter ease .3s;
}

.slide-down-dialog-leave-active {
  animation: dialog-leave ease .5s;
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}


// 向左边进入
.slide-left-enter-active {
  animation: left-enter ease .3s;
}

.slide-left-leave-active {
  animation: left-leave ease .5s;
}

@keyframes left-enter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes left-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

// 向右边进入
.slide-right-enter-active {
  animation: right-enter ease .3s;
}

.slide-right-leave-active {
  animation: right-leave ease .5s;
}

@keyframes right-enter {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes right-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

